<template>
  <div class="padding flex direction-column height-100">
    <div class="search-form padding-horizontal">
      <el-form inline>
        <el-form-item label="图片类型">
          <dictionary-picker v-model="type" dic-code="TU_PIAN_LEI_XING"></dictionary-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
          <el-button icon="el-icon-plus" type="primary" @click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="bg-white padding flex-1 overflow-auto">
      <div v-if="pictures.length > 0" class="pictures">
        <div v-for="item in pictures" :key="item.id" class="picture">
          <el-image
            :alt="item.url" :preview-src-list="[item.url]" :src="item.url"
            class="picture-image" fit="cover"
          ></el-image>
          <div class="picture-bottom">
            <el-button type="danger" @click="del(item)">删除</el-button>
          </div>
        </div>
      </div>
      <div v-else class="flex-center height-100">
        <div class="empty-lists">
          <svg-icon name="search"></svg-icon>
          <span class="empty-text">暂无数据</span>
        </div>
      </div>
    </div>

    <operate-modal ref="modal" :modal-data="modalData" :modal-title="modalTitle" @save-success="query"></operate-modal>
  </div>
</template>

<script>
import DictionaryPicker from '@/components/dictionary-picker'
import { del, getListByType } from '@/api/pictureResources'
import { confirmDel } from '@/utils'
import OperateModal from '@/views/enterprise-picture/operate-modal'

export default {
  name: 'enterprise-picture',
  components: {
    DictionaryPicker,
    OperateModal
  },
  data () {
    return {
      type: '',
      loading: false,
      pictures: [],
      modalTitle: '',
      modalData: {},
    }
  },
  mounted () {
    this.query()
  },
  methods: {
    backToVisual () {
      this.$router.push({
        name: 'VisualEnterpriseEnergy'
      }).catch(() => {
      })
    },
    search () {
      this.query()
    },
    query () {
      this.loading = true
      const params = { type: this.type }
      return getListByType(params).then(res => {
        if (res.code === 200) {
          this.pictures = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
    del (item) {
      confirmDel(this).then(() => {
        if (item.id) {
          del(item.id).then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this.query()
            }
          })
        }
      }).catch(() => {
      })
    },
    add () {
      this.modalTitle = '新增图片'
      this.modalData = {}
      this.$nextTick(() => {
        this.$refs.modal.open()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/variable.scss";

.pictures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: $gutter;
}

.picture {
  position: relative;
  overflow: hidden;
  height: 240px;
  border-radius: 6px;
}

.picture-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.picture-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  transform: translateY(100%);
  transition: all .3s;
  text-align: right;
  background: rgba(0, 0, 0, 0.5);
  padding: .7rem 1rem;
}

.picture:hover {
  .picture-bottom {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
